import { type Ref, ref } from 'vue';
import type { $AllColorStr, $ColorType } from '../types/interface';

/**
 * 默认主题颜色
 */
const _defThemeColor = {
  primary: '#FD6E00',
  success: '#67c23a',
  warning: '#e6a23c',
  error: '#f56c6c',
  info: '#909399',
  bgColor: '#f8f8f8',
  fill: '#ffffff',
  fill2: '#f8f8f8',
  fill3: '#d6d7d9',
  text: '#313131',
  text2: '#666666',
  text3: '#999999',
  textLight: '#ffffff',
  textLight2: '#f5f5f5',
  textLight3: '#eeeeee',
  border: '#d6d7d9',
  border2: '#F5F5F5',
  placeholder: '#d6d7d9',
  icon: '#d6d7d9',
  buttonColor: `linear-gradient( 90deg, #FDBF00 0%, #FD6E00 100%)`,
};

type $ThemeColor = $ColorType | keyof typeof _defThemeColor;
type $ThemeColorObj = Record<$ThemeColor, $AllColorStr>;

/**
 * 亮色的主题颜色
 */
export const lightThemeColor: $ThemeColorObj = _defThemeColor as $ThemeColorObj;

/**
 * 亮色的主题颜色
 */
export const darkThemeColor: $ThemeColorObj = {
  primary: '#FD6E00',
  success: '#67c23a',
  warning: '#e6a23c',
  error: '#f56c6c',
  info: '#909399',
  bgColor: '#f8f8f8',
  fill: '#ffffff',
  fill2: '#f8f8f8',
  fill3: '#d6d7d9',
  text: '#313131',
  text2: '#666666',
  text3: '#999999',
  textLight: '#ffffff',
  textLight2: '#f8f8f8',
  textLight3: '#f5f5f5',
  border: '#d6d7d9',
  border2: '#F5F5F5',
  placeholder: '#d6d7d9',
  icon: '#d6d7d9',
  buttonColor: `linear-gradient( 90deg, #FDBF00 0%, #FD6E00 100%)`,
};

/** 默认颜色 */
export const defThemeColor: Ref<$ThemeColorObj> = ref(_defThemeColor as $ThemeColorObj);
